<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/7/9
  Time: 上午10:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>接口列表</title>
    <script src="/starCms/js/jsonFormat/jsonFormater.js"></script>
    <link rel="stylesheet" href="/starCms/css/jsonFormat/jsonFormater.css"></link>
    <style type="text/css">
        .panel-group {
            margin-bottom: 0;
        }
        .ems_interface_panel_group {
            width: 30%;
            max-width: 250px;
            float: left;
            max-height: 100%;
            overflow-y: scroll;
        }
        .ems_interface_panel_group .list-group-item {
            cursor: pointer;
        }
        .ems_interface_detail {
            overflow: hidden;
        }
        .ems_interface_detail {
            padding-left: 10px;
        }
        th {
            background-color: #f5f5f5;
            min-width: 90px;
        }
        .interface_active {
            background-color: #2F4050;
            color: white;
        }
        .list-group {
            font-size: 14px;
        }
    </style>
</head>
<body>
<c:forEach items="${interfaceSystemVOList}" var="interfaceSystemVO">
    <div class="panel-group ems_interface_panel_group" role="tablist">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="${interfaceSystemVO.seek}collapseListGroupHeading1">
                <h4 class="panel-title">
                    <a class="" role="button" data-toggle="collapse" href="#${interfaceSystemVO.seek}" aria-expanded="true" aria-controls="${interfaceSystemVO.seek}">
                        ${interfaceSystemVO.name}
                    </a>
                </h4>
            </div>
            <div id="${interfaceSystemVO.seek}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${interfaceSystemVO.seek}collapseListGroupHeading1" aria-expanded="true">
                <ul class="list-group">
                    <c:forEach items="${interfaceSystemVO.interfaceModuleVOList}" var="interfaceModuleVO">
                        <li class="list-group-item">
                            <div class="panel-group" role="tablist">
                                <div class="panel panel-default">
                                    <div class="panel-heading" role="tab" id="${interfaceModuleVO.seek}collapseListGroupHeading2">
                                        <h4 class="panel-title">
                                            <a class="" role="button" data-toggle="collapse" href="#${interfaceModuleVO.seek}" aria-expanded="true" aria-controls="${interfaceModuleVO.seek}">
                                                ${interfaceModuleVO.name}
                                            </a>
                                        </h4>
                                    </div>
                                    <div id="${interfaceModuleVO.seek}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="${interfaceModuleVO.seek}collapseListGroupHeading2" aria-expanded="true">
                                        <ul class="list-group">
                                            <c:forEach items="${interfaceModuleVO.interfaceVOList}" var="interfaceVO">
                                                <li class="list-group-item ems_interface" id="${interfaceVO.id}">${interfaceVO.name}</li>
                                            </c:forEach>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>
</c:forEach>

<div class="ems_interface_detail">
    <iframe frameborder="0" width="100%" height="100%"></iframe>
</div>

<script>
    $(function () {
        $(".ems_interface").on("click",function () {
           var interfaceId = $(this).attr("id");
           $(this).addClass("interface_active").siblings().removeClass("interface_active");
            $(".ems_interface_detail").find("iframe:first").attr("src","/starCms/interface/info?id=" + interfaceId);
        });
    })
</script>

<script>
    //格式化JSON
    var options = {
        dom : '#returnJson' //对应容器的css选择器
    };
    var jsonFormat = new JsonFormater(options); //创建对象
    var data = [{"insuranceList":[{"displayThumbnail":"http://abc.com/images/rs.jpg","introduce":"运动意外险相关介绍","price":"200","name":"运动意外险","insuranceId":100001,"purchasedQuantity":"20万"}],"type":"人身保障"},{"insuranceList":[{"displayThumbnail":"http://abc.com/images/a.jpg","introduce":"重大致病险相关介绍","price":"1000","name":"重大致病险","insuranceId":100002,"purchasedQuantity":"30万"}],"type":"健康保障"}];
    $("#returnJson").text(jsonFormat.doFormat(JSON.stringify(data)));
</script>
</body>
</html>
